<template>
	<view class="coupon">
		<view class="item" v-for="(item, index) in couponList" :key="index">
			<view class="head">￥<text class="price">{{item.face_value}}</text><text class="desc">{{item.title}}</text></view>
			<view class="time"><text class="manjian">满{{item.full}}元可用</text>有效日期：领取{{item.validity_time}}天有效</view>
			<button :class="item.is_receive==1?'active':'ZW'" :disabled="item.is_receive==1?true:false" @click="getcoupons(item.id,index)">{{item.is_receive==1?'已领取':'立即领取'}}</button>
		</view>
		<view class="hint">暂无更多可领取券 |<text @click="openMycoupon()">\t查看我的优惠券</text></view>
	</view>
</template>

<script>
	import {dns} from '@/pages/dns.js';
	export default {
		data(){
			return {
				couponList: '',
			}
		},
		onLoad() {
			this.getCouponList()
		},
		methods:{
			getCouponList(){//获取优惠券列表
				uni.request({
					method: 'GET',
					data:{
						page: 1,
						limit: 100
					},
					header:{
						token: uni.getStorageSync("token")
					},
					url: dns + 'coupon/list',
					success:(res)=> {
						console.log(res)
						if(res.data.status == 1){
							this.couponList = res.data.data;
						}
						if(res.data.status == -1){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})
			},
			getcoupons(id,index){//立即领取
				var token = uni.getStorageSync("token");
				uni.request({
					method: 'GET',
					data:{
						id: id
					},
					header:{
						token: token
					},
					url: dns + 'coupon/receive',
					success: (res)=>{
						var msg = res.data.msg;
						if(res.data.status == 1){
							this.couponList[index].is_receive = 1;
							uni.showToast({
								icon:'success',
							    title: msg,
							    duration: 1500
							});
						}
						if(res.data.status == 0){
							uni.showToast({
								icon:'none',
							    title: msg,
							    duration: 1500
							});
						}
					}
				})
			},
			openMycoupon(){//打开我的优惠券
				uni.navigateTo({
					url: '/pages/my/mycoupon/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.coupon{
		padding: 20upx 30upx;
		.item{
			position: relative;
			width: 100%;
			height: 160upx;
			border-radius: 10upx;
			padding: 20upx 40upx;
			margin-bottom: 20upx;
			background-image: linear-gradient(to right, #fea24f, #ff884d);
			color: #fff;
			.head{
				font-size: 30upx;
				.price{
					font-size: 50upx;
					margin-right: 10upx;
				}
				.desc{
					font-size: 30upx;
				}
			}
			.time{
				font-size: 24upx;
				.manjian{
					margin-right: 30upx;
				}
			}
			button{
				position: absolute;
				top: 30upx;
				right:30upx;
				width: 160upx;
				height: 50upx;
				border-radius: 25upx;
				line-height: 52upx;
				background-color: #fff;
				color: #fea24f;
			}
			.active{
				background-color: #ccc;
				color: #fff;
			}
		}
		.hint{
			text-align: center;
			font-size: 24upx;
			color: #7f7f7f;
			text{
				color: #ed702d;
			}
		}
	}
</style>
